import React from 'react'
import { NavLink } from "react-router-dom"
import { withRouter } from "react-router"
import classNames from 'classnames/bind'

import styles from './index.less'

let cx = classNames.bind(styles)

function Menu (props) {
  const { title, path, location } = props
  const menuItemClassName = cx({
    ['menu-item']: true,
    'active': location.pathname === path
  })
  return (
    <li className={menuItemClassName}>
      <NavLink activeClassName={styles['active']} to={ path }>{ title }</NavLink >
    </li>
  )
}

export default withRouter(Menu)